<template>
  <el-table :data="map_player_list" border stripe>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="user_exp" label="境界"></el-table-column>
    <el-table-column prop="hp" label="当前生命值"></el-table-column>
    <el-table-column prop="hp" label="门派"></el-table-column>
    <el-table-column prop="now_map" label="当前地图">
      <template slot-scope="scope">
        <span>
          {{ scope.row.now_map.name }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态">
      <template slot-scope="scope">
        <span v-if="scope.row.status == '1'">
          重伤中
        </span>
        <span v-else>
          正常
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="speed" label="操作">
      <template slot-scope="scope">
        <span v-if="scope.row._id != user_info.id">
          <el-button
            type="primary"
            icon="edit"
            size="small"
            v-if="scope.row.status == '0'"
            @click="attack(scope.row._id)"
            >攻击</el-button
          >
          <el-button
            type="primary"
            icon="edit"
            size="small"
            v-if="scope.row.status == '1'"
            @click="attack()"
            disabled
            >攻击</el-button
          >
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "Playerlist",
  data() {
    return {
      map_player_list: [],
      battle_log: "",
    };
  },
  computed: {
    user_info() {
      console.log(this.$store.getters.user);
      return this.$store.getters.user;
    },
  },
  created() {
    this.getNowMapPlayer();
  },
  methods: {
    getNowMapPlayer() {
      // 获取地图角色数据
      let mid = this.user_info.now_map;
      console.log("mid", mid);
      let url = `api/maps/getplayer/${mid}`;
      this.$axios
        .get(url)
        .then((res) => {
          this.map_player_list = res.data;
          console.log(this.map_player_list);
        })
        .catch((err) => console.log(err));
    },
    attack(uid) {
      // 攻击接口
      this.$axios
        .post(`/api/battles/player/${uid}`)
        .then((res) => {
          this.battle_log = res.data;
          this.getUserInfo();
          console.log(res.data);
        })
        .catch((err) => console.log(err));
    },
  },
};
</script>
<style scoped>
.playerlist {
  position: fixed;
  top: 71px;
  right: 0;
  min-height: 100%;
  background: #fffedef8;
  z-index: 99;
}
.el-menu {
  border: none;
}
.fa-margin {
  margin-right: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.el-menu-vertical-demo {
  width: 35px;
}
.el-submenu .el-menu-item {
  min-width: 180px;
}
</style>

